<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改样式</title>
</head>
<body>
<div id="container" >

    <div id="other" style="background-color: aqua ; text-align: center;border: 10px solid #ff0000;width: 200px ; height: 50px">
        杂项
    </div>
</div>
<button type="button" onclick="changeStyle()">点击我，进行修改样式</button>
<script type="text/javascript">
    function changeStyle() {
        /* 修改样式 : 其实就是修改对应的 style 中的值
            1、获取元素
            2、获取style 中的值
            3、修改
        */
        let div = document.querySelector("#other");
        console.table(div);
        /*
        console.log(div.style);
        console.log(div.style.backgroundColor);
        console.log(div.style[0]);
        console.log(div.style["backgroundColor"]);
        */
        div.style["background-color"]="pink";
    }
</script>
</body>
</html>